<template>
 <div class="box-right clearficx">
            <div class="nav-right-top" >
                <div>
                    <div class="false" @click="change(0)" :class="num===0?'active-right':''">全部</div>
                    <div class="false" @click="change(1)" :class="num===1?'active-right':''">我创建的</div>
                    <div class="false" @click="change(2)" :class="num===2?'active-right':''">我加入的</div>
                    <div class="false" @click="change(3)" :class="num===3?'active-right':''">我课程的</div>
                </div>
                <div class="training-btn">创建</div>
            </div>
            <div class="right-box" v-loading="loading">
                <All></All>
            </div>
        </div>
</template>

<script setup lang="ts">
import All from './all/index.vue'
import { ref, onMounted } from 'vue'
import useTrainingStore from '../../stores/training'
const trainingStore = useTrainingStore()
// 控制高亮
let num = ref(0)
let loading = ref(false)
let pageSize = ref(20)
let pageNum = ref(1)
let type = ref('system')
let Category = ref('')
onMounted(() => {
    getAll()
})
const getAll = async () => {
    loading.value =true
    // loading.value = true
    await trainingStore.getRoomAll(pageSize.value, pageNum.value-1, type.value,Category.value)
    // console.log( trainingStore.Roomlist);
    loading.value = false
}
const change = (n:any)=>{
    num.value = n
    if(n===0){
        console.log(0);
        Category.value=''
    }else if(n===1){
        Category.value='my_create'
    }else if(n===2){
        Category.value='my_join'
    }else if(n===3){
        console.log(3);
        Category.value='my_course'
    }
    getAll()
}
</script>

<style scoped>
.clearficx::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearficx {
    *zoom: 1;
}
/deep/ .el-loading-spinner .path {
    stroke: #f93684
}

/deep/ .el-loading-text {
    color: #f93684;
}
.box-right {
    margin: 10px 5px 0 0;
    float: right;
    width: 980px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.nav-right-top {
    background-color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 30px;
    box-sizing: border-box;
}
.false {
    float: left;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: #7d8090;
    padding: 9px 12px;
    margin-right: 24px;
    margin-bottom: 10px;
}
.right-box {
    height: 600px;
    margin-top: 10px;
    background-color: #FFFFFF;
    overflow: hidden;
    padding: 0 30px 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}



.training-btn {
    width: 84px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #f93684;
    border-radius: 16px;
    cursor: pointer;
}

.active-right {
    background-color: #f93684;
    color: #fff;
}
</style>